<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useTaskStore } from '../../stores/taskStore'
import { useCategoryStore } from '../../stores/categoryStore'
import TaskList from '../../components/todo/TaskList.vue'
import AddTask from '../../components/todo/AddTask.vue'

const route = useRoute()
const taskStore = useTaskStore()
const categoryStore = useCategoryStore()

// 获取分类ID
const categoryId = computed(() => route.params.id)

// 获取分类
const category = computed(() => {
  return categoryStore.getCategoryById(categoryId.value)
})

// 获取分类任务
const categoryTasks = computed(() => {
  return taskStore.getTasksByCategory(categoryId.value)
})

// 初始化数据
onMounted(async () => {
  await categoryStore.loadCategories()
  await taskStore.loadTasks()
})

// 当路由参数改变时重新计算
watch(() => route.params.id, (newId) => {
  // 如果需要，可以在这里添加额外的逻辑
}, { immediate: true })
</script>

<template>
  <div class="category-view" v-if="category">
    <!-- 标题和颜色标识 -->
    <div class="page-header mb-6">
      <div class="d-flex align-center mb-1">
        <v-icon :color="category.color" class="mr-2" size="large">{{ category.icon }}</v-icon>
        <h1 class="text-h4">{{ category.name }}</h1>
      </div>
      <div class="text-subtitle-1 text-medium-emphasis">
        共 {{ categoryTasks.length }} 个任务
      </div>
    </div>
    
    <!-- 添加任务 -->
    <AddTask :defaultCategoryId="categoryId" />
    
    <!-- 任务列表 -->
    <TaskList 
      :tasks="categoryTasks" 
      :title="`${category.name}任务列表`" 
      :emptyMessage="`${category.name}分类下暂无任务，点击上方添加新任务`"
    />
  </div>
  
  <!-- 分类不存在时的提示 -->
  <div v-else class="not-found text-center py-8">
    <v-icon size="x-large" color="grey" class="mb-4">mdi-alert-circle-outline</v-icon>
    <h2 class="text-h5 mb-2">分类不存在</h2>
    <p class="text-body-1 text-medium-emphasis">
      您访问的分类不存在或已被删除
    </p>
    <v-btn color="primary" to="/today" class="mt-4">返回今日任务</v-btn>
  </div>
</template>

<style scoped>
.category-view {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}

.not-found {
  max-width: 400px;
  margin: 0 auto;
}
</style> 